<template>
	<!-- 添加图表卡 start -->
	<md-dialog :md-active.sync="isShowDialog">
		<md-dialog-title>{{getLangText(label.dialogTitle)}}</md-dialog-title>
		<md-dialog-content style="width:800px;overflow-x:hidden;overflow-y:auto;display:flex;">
			<div style="flex:1;padding-right:8px;display:inline-flex;flex-direction:column;">
				<md-field>
					<label for="bgType">{{getLangText(label.background)}}</label>
					<md-select v-model="bgStyle.bgType">
						<md-option :value="item.en" v-for="item in bgType" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<md-field v-if="bgStyle.bgType=='gradient'">
					<label>{{getLangText(label.gradientType)}}</label>
					<md-select v-model="bgStyle.gradient">
						<md-option :value="item.en" v-for="item in gradientType" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<div class="table-row-item" v-if="bgStyle.bgType!='picture'">
					<span>{{getLangText(label.color)}}</span>
					<span>
						<span style="display:inline-flex;align-items:center;">
							<span :class="['color-span',picker.current==1?'active':'']" :style="{background:bgStyle.gradientColor1}" @click="showColorPicker(1)"></span>
							{{bgStyle.gradientColor1}}
						</span>
						<span v-if="bgStyle.bgType=='gradient'" style="display:inline-flex;align-items:center;margin-left:8px;">
							<span :class="['color-span',picker.current==2?'active':'']" :style="{background:bgStyle.gradientColor2}" @click="showColorPicker(2)"></span>
							{{bgStyle.gradientColor2}}
						</span>
					</span>
				</div>
				<div class="table-row-item" v-if="bgStyle.bgType=='picture'">
					<span>{{getLangText(label.color)}}</span>
					<span>
						{{getLangText(label.n)}}
						<md-switch v-model="bgStyle.isUrlPic"></md-switch>
						{{getLangText(label.y)}}
					</span>
				</div>

				<md-field v-if="bgStyle.bgType=='picture'&&!bgStyle.isUrlPic">
					<label>{{getLangText(label.picture)}}</label>
					<md-file v-model="bgStyle.picture" accept="image/*" @md-change="imageToString" />
				</md-field>

				<md-field v-if="bgStyle.bgType=='picture'&&bgStyle.isUrlPic">
					<label>{{getLangText(label.url)}}</label>
					<md-input v-model="bgStyle.picUrl" />
				</md-field>
				<div :style="bgResult" class="bg-result-box"></div>
			</div>
			<div style="flex:1;">
				<color-picker
					:lang-type="langType"
					:rgba="picker.result"
					:show-picker="true"
					@color-result="onColorPicker"
				></color-picker>
			</div>
		</md-dialog-content>

		<md-dialog-actions>
			<md-button class="md-primary md-raised" @click="closeDialog">{{getLangText(label.no)}}</md-button>
			<md-button class="md-accent md-raised" @click="confirmDialog">{{getLangText(label.ok)}}</md-button>
		</md-dialog-actions>
	</md-dialog>
	<!-- 添加图表卡 end -->
</template>

<script>
	import ColorPicker from "@/components/comp/ColorPicker";

	export default {
		name: "BgDialog",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			bg: {
				type: Object,
				default: function() {
					return {};
				}
			},
			isShow: {
				type: Boolean,
				default: false
			}
		},
		components: {
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				ok: { zh: "确定", en: "OK" },
				no: { zh: "取消", en: "cancel" },
				y: { zh: "是", en: "yes" },
				n: { zh: "否", en: "no" },
				dialogTitle: { zh: "添加图表卡", en: "Add Chart Card" },
				gradientType: { zh: "渐变类型", en: "gradientType" },
				background: { zh: "背景", en: "background" },
				picture: { zh: "图片", en: "picture" },
				upload: { zh: "上传文件", en: "uploadFile" },
				url: { zh: "网络地址", en: "URL" },
				color: { zh: "颜色", en: "color" },
				isUrlPic: { zh: "是否网络图片", en: "" }
			},

			bgType: [
				{ zh: "纯色", en: "purity" },
				{ zh: "渐变", en: "gradient" },
				{ zh: "图片", en: "picture" }
			],

			gradientType: [
				{ zh: "上", en: "top" },
				{ zh: "下", en: "bottom" },
				{ zh: "左", en: "left" },
				{ zh: "右", en: "right" },
				{ zh: "左上", en: "left top" },
				{ zh: "右上", en: "right top" },
				{ zh: "左下", en: "left bottom" },
				{ zh: "右下", en: "right bottom" },
				{ zh: "圆形", en: "circle" },
				{ zh: "椭圆形", en: "ellipse" }
			],
			//颜色选择器
			picker: {
				
				current:1,
				result: ""
			},

			bgStyle: {
				bgType: "purity",
				gradient: "top",
				gradientColor1: "#FFFFFF",
				gradientColor2: "#FFFFFF",
                picture: "",
                picUrl: "",                
                isUrlPic: false,                
            },
			bgResult:'',
			isShowDialog:false
			
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.isShowDialog=true;
					this.parseObj();
				}else{
					this.$emit("update:isShow", false);
					this.isShowDialog=false;
				}
			},
			isShowDialog(){
				
				this.$emit('update:isShow',this.isShowDialog);
			},
            bgStyle:{
                deep:true,
                handler(val){                   
                    this.createBgResult(this.bgStyle);
                }
            }
		},
		methods: {
			parseObj() {
				if (this.bg){
					for (var key in this.bg) {
						for(var k in this.bg[key][k]){
							this.bgStyle[key][k] = this.bg[key][k];
						}						
                    }
				}else{
					this.bgStyle={
				bgType: "purity",
				gradient: "top",
				gradientColor1: "#FFFFFF",
				gradientColor2: "#FFFFFF",
                picture: "",
                picUrl: "",                
                isUrlPic: false,                
            };
				}
			},
			createBgResult(style) {
                var bgResult='';
				if (style.bgType == "purity") {
					bgResult = {
						backgroundColor: style.gradientColor1
					};
				} else if (style.bgType == "gradient") {
					if (
						style.gradient != "circle" &&
						style.gradient != "ellipse"
					) {
						bgResult = {
							backgroundImage:
								"linear-gradient( to " +
								style.gradient +
								" ," +
								style.gradientColor1 +
								"," +
								style.gradientColor2 +
								")"
						};
					} else {
						bgResult = {
							backgroundImage:
								"radial-gradient(" +
								style.gradient +
								" ," +
								style.gradientColor1 +
								"," +
								style.gradientColor2 +
								")"
						};
					}
				} else if (style.bgType == "picture") {
					 bgResult = {
						backgroundImage: "url(" + style.picUrl + ")",
						backgroundSize: "100% 100%",
						backgroundRepeat: "no-repeat"
					};
                }
                this.bgResult=bgResult;
			},
			imageToString(files) {
				var that = this;
				var reads = new FileReader();
				var f = files[0];
				reads.readAsDataURL(f);
				reads.onload = function(e) {
					that.bgResult = {
						backgroundImage: "url(" + this.result + ")",
						backgroundSize: "100% 100%",
						backgroundRepeat: "no-repeat"
					};
				};
			},
			showColorPicker(tag) {
                this.picker.current=tag;
				if (tag==1) {
                    this.picker.result = this.bgStyle.gradientColor1;
				} else {
				 this.picker.result = this.bgStyle.gradientColor2;
				}
			},
			onColorPicker(result) {
				if (this.picker.current == 1) {
					this.bgStyle.gradientColor1 = result.rgba;
				} else if (this.picker.current == 2) {
					this.bgStyle.gradientColor2 = result.rgba;
				}
			
			},
			closeDialog() {
				this.$emit("update:isShow", false);
			},
			confirmDialog() {
                this.bgStyle.result=this.bgResult;
				this.$emit("dialog-ok", this.bgStyle);
				this.$emit("update:isShow", false);
			}
		},
		mounted() {
            this.parseObj();
        }
	};
</script>
<style>
	.bg-result-box {
		flex: 1;
	}
</style>